<template>
  <div class="category">
    <!-- 头部搜索框 -->
    <div class="header">
      <button @click="$router.push('../Search')"><van-icon name="search" />搜索商品，共计30000+款好物</button>
    </div>
    <!-- 底部内容 -->
    <div class="main">
      <!-- 左侧 -->
      <div class="left">
        <van-sidebar class="sidebar" v-model="active">
          <van-sidebar-item v-for="item, index in set" @click="change(index, item.id)" :key="item.id"
            :title="item.name" />
        </van-sidebar>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <img
          :src="imgList ? imgList : 'https://yanxuan.nosdn.127.net/static-union/1670915168b000c3.png?quality=75&type=webp&imageView&thumbnail=0x196'"
          alt="">


        <div class="ItemList" v-for="item in ListInfo" :key="item.id">
          <div class="ItemList-title">{{ item.name }}</div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="title in item.categoryList" :key="title.id" @click="onchange(title.id, title)">
              <van-image :src="title.wapBannerUrl" />
              <span>{{ title.name }}</span>
            </van-grid-item>
          </van-grid>
        </div>

      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { GetCategoryInfoData, reqGetCategoryList } from '@/api/category'
import { useRouter } from 'vue-router';

const active = ref(0);

const set = ref<any>([]);

const imgList = ref("");

const ListInfo = ref<any>([])

let ID1 = ref<any>(0);

let $Router = useRouter();

let onchange = (id: any, item: any) => {
  // console.log(id, 22323, item.name);
  $Router.push({
    path: "/ListDetails",
    query: {
      ID1,
      id,
      cname: item.name
    }
  })
  console.log(id);


}

let change = async (index: any, id: any) => {
  imgList.value = set.value[index].bannerUrl

  let result = await GetCategoryInfoData(id);

  // console.log(result.data.categoryGroupList);

  let categoryList = result.data.categoryGroupList

  ListInfo.value = categoryList

  ID1 = id


}
// 侧边栏数据/顶层图
let categoryList = async () => {
  let result = await reqGetCategoryList();

  let categoryNav = result.data.categoryL1List
  set.value = categoryNav
}

onMounted(async () => {
  await categoryList();
  change(0, 11);
});


</script>

<style>
:root:root {
  --van-sidebar-selected-text-color: #AB2B2B;
  --van-sidebar-selected-border-color: #AB2B2B;
}
</style>

<style lang="less" scoped>
.category {
  width: 100%;
  height: 100%;

  .header {
    width: 350px;
    height: 35px;
    margin: 10px auto;
    // position: fixed;


    button {
      border: none;
      border-radius: 5px;
      background-color: #ededed;
      color: #666;
      font-size: 15px;
      width: 350px;
      height: 35px;

    }
  }

  .main {
    position: fixed;
    top: 55px;
    bottom: 50px;
    overflow: auto;
    width: 100vw;
    display: flex;
    border-top: 1px solid #ccc;

    .left {
      position: fixed;
      height: 100vh;
      overflow: auto;
      top: 56px;
      left: 0;

      border-right: 1px solid #ccc;
      // position: fixed;
      // z-index: 100;
      // top: px
    }

    .right {

      position: fixed;
      overflow: auto;
      top: 56px;
      bottom: 0px;
      right: 0px;
      width: 77vw;

      // flex: 1;
      margin-bottom: 50px;

      img {
        width: 264px;
        height: 96px;
        margin: 10px auto;
        display: block;

      }

      .ItemList {
        .ItemList-title {
          width: 264px;
          height: 30px;
          border-bottom: 1px solid #ccc;
          margin: auto;
          font-size: 15px;
          font-weight: bold;
        }
      }

    }

  }
}
</style>